<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Raxan Cursor Plugin</title>
        <script src="../raxan/startup.js" type="text/javascript"></script>
        <script type="text/javascript">
            Raxan.css('master').css('default/theme');
            Raxan.include('jquery');
            Raxan.include('raxan-ui');

            Raxan.ready(function(){
                $('#btnshow, #btnhide').click(function(e){
                    var o = $('#box1');
                    if (e.target.id=='btnshow') o.raxCursor("hourglass");
                    else o.raxCursor("hide");
                    return false;
                })

                $('#box2').raxCursor("search");
                $('#box3').raxCursor("busy");
            })
        </script>
    </head>

    <body>

        <div class="container c30 pad prepend-top">

            <div id="box2" class="rax-box alert c5 r5 left rtm">
                <h3>I am always <br />Searching...</h3>
            </div>

            <div id="box1" class="rax-box success c16 r5 left">
                <h3>Hourglass Cursor</h3>
                <p>Click buttons to show/hide hourglass</p>
                <a id="btnshow" href="#" class="button">Show Hourglass</a>&nbsp;
                <a id="btnhide" href="#" class="button">Hide Hourglass</a>
            </div>

            <div id="box3" class="rax-box info c5 r5 right">
                <h3>I am always <br />Busy...</h3>
            </div>
        </div>
    </body>

</html>

